<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文章</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/fonts.style.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />


    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
</head>
<body>
<div class="top-nav animation-bg-color-skyblue">
    <div class="logo">
        <a href="#"><img th:src="@{/img/logo.png}" /></a>
    </div>
    <div class="account-check fr">
        <div class="before-login">
            <a class="a-btn animation" href="/user/login">
                <span class="icon-enter"></span>登录
            </a>
            <a class="a-btn animation" href="/user/register">
                <span class="icon-user-plus"></span>注册
            </a>
        </div>
        <div class="after-login hide">
            <!--<a class="a-btn animation fr" href="#">-->
            <!--<span class="icon-exit"></span>退出-->
            <!--</a>-->
            <h5 class="fr">欢迎登陆:13049148938</h5>
        </div>
    </div>

    <div class="s-side animation-bg-color-skyblue">
        <ul>
            <!--这部分是导航栏信息。-->
            <li class="s-firstItem first">
                <a href="/user/index">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <!--查找-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>查找</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toFindEval">
                            查找医生&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--预约挂号-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>预约挂号</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/reservation/toReserve">
                            预约&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--社区-->
            <li class="first">
                <div class="d-firstNav s-firstNav">
                    <i class="fa fa-bars"></i>
                    <span>社区</span>
                    <i class="fa fa-caret-right fr" ></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>文章</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toSendArticle">
                                    发表文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/community/showArticle">
                                    浏览文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>帖子</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toCommunity">
                                    浏览帖子&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!--个人中心-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>个人资料</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/user/userInfo">
                                    个人信息&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/password">
                                    修改密码&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/verify">
                                    实名认证&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>钱包</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/reservation/toWallet">
                                    我的钱包&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toRecharge">
                                    充值&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toBill">
                                    我的账单&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/community/toCollection">
                            我的收藏&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toMyEvaluate">
                            我的评价&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layout">
    <div class="container">
        <div class="row">
            <!--文章内容 start-->
            <div class="col-12">
                <form class="topic-form" th:action="@{/community/collectArticle/} + ${article.id}" method="post">
                    <!--文章信息-->
                    <div class="show-topic">
                        <h2 class="topic-title" align="center">[[${article.title}]]</h2><br>
                        <!--<div class="row col-12 article-author d-flex align-content-center">-->
                        <h4 class="article-author" align="center">[[${name}]]</h4>
                        <!--</div>-->
                        <div class="row">
                            <p class="topic-content" th:text="${article.content}"></p>
                        </div>
                    </div>
                    <!--收藏按钮-->
                    <div class="collection">
                        <th:block th:if="${article.status} eq 0">
                            <button class="collection-btn animation" type="submit" th:align="center">
                                <span class="icon-star-empty"></span>
                                收藏
                            </button>
                        </th:block>
                        <th:block th:if="${article.status} eq 1">
                            <button class="collection-btn animation" type="submit">
                                <span class="icon-star-full"></span>
                                已收藏
                            </button>
                        </th:block>
                    </div>
                </form>
            </div>
            <!--文章内容 end-->

            <!--评论 start-->
            <div class="col-12">
                <hr class="divider"><!-- 分界线 -->
                <h4>评论</h4>
                <form class="comment-form" method="post" th:action="@{/community/sendArticleComment/} + ${article.id}">
                    <div class="row col-12 box-holder">
                        <textarea class="col-10 comment-box" name="comments"></textarea>
                        <div class="col-2 btn-box">
                            <button class="comment-btn animation" type="submit">
                                <span class="icon-pencil"></span>
                                评论
                            </button>
                        </div>
                    </div>
                </form>
            </div>
            <!--评论 end-->

            <!--评论区 start-->
            <div class="col-12">
                <hr class="divider"><!-- 分界线 -->
                <div class="comment-area" th:if="${comment.aid} eq ${article.id}" th:each="comment : ${articleComments}">
                    <div class="show-topic">
                        <div class="row col-12 floors">
                            <div class="col-md-2">
                                <span th:text="${comment.name}"></span>
                            </div>
                            <div class="col-md-10">
                                <span class="topic-content" th:text="${comment.comments}"></span>
                                <small><span class="topic-comment-time" th:text="${comment.time}"></span></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--评论区 end-->
        </div>
    </div>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</div>

</body>
</html>